<template>
  <div>
    <div class="message_head">
      <div v-if="type == 'err'" class="head_msg">
        <img alt="" src="~images/message_err.png" />
        <p>对不起身份认证失败！</p>
      </div>
      <div v-if="type == 'success'" class="head_msg">
        <img alt="" src="~images/message_success.png" />
        <p>恭喜您身份核验成功！</p>
      </div>
    </div>
    <div v-if="type == 'err'" class="message_btn" @click="goRegister">
      请重新认证
    </div>
    <div v-if="type == 'success'" class="message_btn" @click="goAuthUrl">
      去预约
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Message',
    data() {
      return {
        type: 'err',
        token: '',
        expiresIn: '',
        redirect: '',
        secret: '',
        qrCode: '',
      }
    },
    mounted() {
      const { token, expiresIn, redirect, secret, qrCode } = this.$route.query
      if (token) {
        this.type = 'success'
        this.token = token
        this.expiresIn = expiresIn
        this.secret = secret
        this.qrCode = qrCode
      }
      this.redirect = redirect
    },
    methods: {
      // 去预约
      goAuthUrl() {
        let url = decodeURIComponent(this.redirect)
        let has = url.indexOf('?') != -1 ? true : false
        url += has ? '&' : '?'
        url += '&token=' + this.token
        url += '&expiresIn=' + this.expiresIn
        url += '&secret=' + this.secret
        url += '&qrCode=' + this.qrCode
        window.location.replace(url)
      },
      // 重新认证
      goRegister() {
        this.$router.replace({
          path: '/register',
          query: { redirect: this.redirect },
        })
      },
    },
  }
</script>

<style>
  .message_head {
    width: 100%;
    height: 220px;
    background-image: url('~images/message_back.png');
    background-size: 100% 100%;
  }
  .head_msg {
    width: 100%;
    text-align: center;
  }
  .head_msg img {
    width: 78px;
    height: 78px;
    margin-top: 60px;
  }
  .head_msg p {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    margin-top: 20px;
  }
  .message_btn {
    width: 288px;
    height: 48px;
    line-height: 48px;
    background: linear-gradient(0deg, #4093ff, #4193ff);
    box-shadow: 0px 9px 12px 0px rgba(63, 143, 255, 0.23);
    border-radius: 24px;
    color: #ffffff;
    font-size: 17px;
    text-align: center;
    margin: auto;
    margin-top: 126px;
  }
</style>
